/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-08 18:03:18
 * @LastEditTime: 2023-04-15 17:18:17
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Flex, Icon, SimpleGrid, Text } from '@chakra-ui/react';
import { setSelectedPaintingStyle } from 'features/parameters/store/presetSlice';
import { useCallback } from 'react';
import { MdNotInterested } from 'react-icons/md';

import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

import PaintingStyleItem, { PaintingStyle } from './PaintingStyleItem';

export const PaintingStylePickerContent = () => {
  const { paintingStyle, selectedPaintingStyle } = useAppSelector(
    (store) => store.preset
  );

  const dispatch = useAppDispatch();

  const handleSelect = useCallback(
    (e: string) => {
      dispatch(setSelectedPaintingStyle([e]));
    },
    [dispatch]
  );

  return (
    <SimpleGrid columns={{ base: 2, md: 4, lg: 5, xl: 6 }} spacing={4}>
      <Flex flexDirection="column" gap="1">
        <Flex
          h="8rem"
          w="8rem"
          role="group"
          onClick={() => dispatch(setSelectedPaintingStyle([]))}
          justify="center"
          align="center"
          cursor="pointer"
          bg="base.900"
          border="3px solid"
          borderColor="base.850"
          rounded="md"
        >
          <Icon as={MdNotInterested} fontSize="2rem" />
        </Flex>
        <Text textAlign="center" fontWeight={400} color="base.300">
          清除绘画风格
        </Text>
      </Flex>
      {paintingStyle.map((a: PaintingStyle) => (
        <PaintingStyleItem
          key={a.id}
          id={a.id}
          imgUrl={a.imgUrl}
          name={a.name}
          onClick={handleSelect}
          isSelected={selectedPaintingStyle[0] === a.id}
        />
      ))}
    </SimpleGrid>
  );
};

export default PaintingStylePickerContent;
